import React, { useEffect, useState } from "react";
import { connect } from 'dva'
import { MobileOutlined, LockOutlined } from "@ant-design/icons";
import { Input, Form, Button } from "antd";

import "./index.scss";
const checkPhone = (rule: any, value: any) => {
  //   let reg = /^1\d{10}$/
  if (value && value.toString().length > 0) {
    // if (reg.test(value)) {
    //   return Promise.resolve()
    // } else {
    //   return Promise.reject('手机号码格式有误')
    // }
    return Promise.resolve();
  } else {
    return Promise.reject("手机号码不能为空");
  }
};

const Login = (props: any) => {
  const [config, set_config] = useState<any>({});
  const [form] = Form.useForm();
  const onFinish = async (values: any) => {
    const params = {
      ...values,
      auth_type: "TYPE_PASSWORD",
    };
    dispatch({ type: 'app/login', payload: params })
    props.history.push("./product/on");
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };
  useEffect(() => {
  }, []);
  return (
    <div className="login_page">
      <div className="login_page_content">
        <div className="login_page_content_left">
          <img src={require("../../assets/left.png")} alt="left" />
        </div>
        <div className="login_page_content_right">
          <h2>登录</h2>
          <Form form={form} onFinish={onFinish} onFinishFailed={onFinishFailed}>
            <Form.Item name="user_name" rules={[{ validator: checkPhone }]}>
              <Input
                style={{ height: 40 }}
                placeholder="请输入用户名"
                prefix={
                  <MobileOutlined
                    className="site-form-item-icon"
                    style={{ color: "#1890FF" }}
                  />
                }
              />
            </Form.Item>
            <Form.Item
              name="pwd"
              rules={[{ required: true, message: "密码不能为空" }]}
            >
              <Input.Password
                style={{ height: 40 }}
                placeholder="请输入登录密码"
                prefix={
                  <LockOutlined
                    className="site-form-item-icon"
                    style={{ color: "#1890FF" }}
                  />
                }
              />
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                style={{
                  width: "100%",
                  height: 40,
                  marginBottom: 130,
                  marginTop: 10,
                }}
              >
                登录
              </Button>
            </Form.Item>
          </Form>
          <span>Copyright@2020 上海天壤智能科技有限公司</span>
        </div>
      </div>
    </div>
  );
};
export default connect(({ Login }: any) => ({ Login }))(Login)
